import Taro from '@tarojs/taro'
import React, { useState, useEffect } from 'react'
import { View, Image, Textarea } from '@tarojs/components'
import imgList from '@components/imgList'
import dayjs from '@src/utils/dateTimeUtil'
import { useDispatch} from 'react-redux'
import { sendMsg } from '@redux/actions'

import './subPage.scss'

function MsgInput() {

    const [msgValue, setMsgValue] = useState()
    const dispatch = useDispatch();

    const onSendClick = () => {
        if(msgValue && sendMsg){
            setMsgValue('')
            dispatch(sendMsg(new String(msgValue)))
        }
    }

    const onMsgInput = ({detail}) =>{
        setMsgValue(detail.value)
    }

    return <View className='bottom'>
                <Textarea holdKeyboard showConfirmBar={false}  fixed={true}
                    value={msgValue} autoHeight placeholder='请输入聊天内容…' 
                    onInput={onMsgInput}/>
                <Image className='phizBtn' src={imgList.phiz} mode='aspectFit'/>
                <View className='sendBtn' onClick={onSendClick}>发送</View>
            </View>
}

export default MsgInput
